import React from 'react'
import { Text, View, Image } from 'react-native'
import { TabBar } from '@ant-design/react-native'

import cookbook from '../../assets/images/cookbook.png'
import cookbook_active from '../../assets/images/cookbook-active.png'
import menu from '../../assets/images/menu.png'
import menu_active from '../../assets/images/menu-active.png'
import location from '../../assets/images/location.png'
import location_active from '../../assets/images/location-active.png'
import more from '../../assets/images/more.png'
import more_active from '../../assets/images/more-active.png'

import styles from './StyleIndex'

import Home from './home/Home'

interface Props {

}

interface State {
  selectedTab: string
}

export default class Index extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      selectedTab: 'cookbook',
    };
  }

  onChangeTab(tabName: string) {
    this.setState({
      selectedTab: tabName,
    });
  }
  render() {
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#000"
        barTintColor="#f5f5f5"
      >
        <TabBar.Item
          title="美食大全"
          icon={<Image source={cookbook} style={styles.tabbarImg} />}
          selectedIcon={<Image style={styles.tabbarImg} source={cookbook_active} />}
          selected={this.state.selectedTab === 'cookbook'}
          onPress={() => this.onChangeTab('cookbook')}
        >
          <Home></Home>
        </TabBar.Item>
        <TabBar.Item
          title="分类"
          icon={<Image source={menu} style={styles.tabbarImg} />}
          selectedIcon={<Image source={menu_active} style={styles.tabbarImg} />}
          selected={this.state.selectedTab === 'category'}
          onPress={() => this.onChangeTab('category')}
        >
          <View><Text>分类</Text></View>
        </TabBar.Item>
        <TabBar.Item
          title="美食地图"
          icon={<Image source={location} style={styles.tabbarImg} />}
          selectedIcon={<Image source={location_active} style={styles.tabbarImg} />}
          selected={this.state.selectedTab === 'map'}
          onPress={() => this.onChangeTab('map')}
        >
          <View><Text>地图</Text></View>
        </TabBar.Item>
        <TabBar.Item
          title="更多"
          icon={<Image source={more} style={styles.tabbarImg} />}
          selectedIcon={<Image source={more_active} style={styles.tabbarImg} />}
          selected={this.state.selectedTab === 'more'}
          onPress={() => this.onChangeTab('more')}
        >
          <View><Text>更多</Text></View>
        </TabBar.Item>
      </TabBar>
    );
  }
}